<!-- -->
<template>
  <div class="max_div">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px">
      <!-- 条件搜索输入框 -->
      <el-form-item label="商品名称">
        <el-input v-model="queryParams.productName" placeholder="请输入商品名称" clearable @keyup.enter.native="handleQuery($event)"/>
      </el-form-item>
      <!-- 条件搜索输入框 -->
      <el-form-item label="商品英文名称">
        <el-input v-model="queryParams.productEnName" placeholder="请输入商品英文名" clearable @keyup.enter.native="handleQuery($event)"/>
      </el-form-item>

      <el-form-item>
        <!-- 条件搜索按钮 -->
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery($event)">搜索</el-button>
        <!-- 重置数据按钮 -->
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery()">重置</el-button>
      </el-form-item>
    </el-form>

    <!--
      stripe 斑马线展示表格
      border 边框展示
      height 超出自动出现滚动条
      data 绑定的数据
    -->
    <el-table stripe border height="670" :data="this.productList">

      <el-table-column label="序号" width="150">
        <template #default="scope">
          <span>{{ (scope.$index + 1) }}</span>
        </template>
      </el-table-column>

      <el-table-column  prop="productName" label="商品名" width="150"/>

      <el-table-column  prop="productEnName" label="英文名" width="150"/>

      <el-table-column  prop="collectCount" label="收藏次数" width="150"/>

      <el-table-column  prop="salesQuantity" label="商品销量" width="150"/>

      <el-table-column  prop="productPrice" label="原价" width="150"/>

      <el-table-column  prop="productDescription" label="商品描述" width="150"/>

      <el-table-column  prop="productType" label="商品类型" width="150"/>

      <el-table-column  prop="muchFreeShippingIsFull" label="满多少包邮" width="150"/>

      <el-table-column  prop="expressStatus" label="快递送货" width="150">
        <template #default="scope">
          <span v-if="scope.row.expressStatus === true">支持快递送货</span>
          <span v-else>不支持快递</span>
        </template>
      </el-table-column>

      <el-table-column  prop="takeoutStatus" label="外卖送货" width="150">
        <template #default="scope">
          <span v-if="scope.row.expressStatus === true">支持外卖送货</span>
          <span v-else>不支持外卖</span>
        </template>
      </el-table-column>

      <el-table-column  prop="availableForSale" label="是否可售" width="150">
        <template #default="scope">
          <span v-if="scope.row.expressStatus === true">可售</span>
          <span v-else>商家暂未开启售货</span>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="300px">
        <template #default="scope" >
          <el-button type="primary" @click="ViewDetail(scope.row)">详细</el-button>
          <el-button type="danger">删除</el-button>
          <el-button type="warning">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--前端分页-->
    <el-pagination class="block"
      v-if="queryParams.total != 0"
      background
      :total="queryParams.total"
      @current-change="handleQuery(queryParams.currentPage)"
      :current-page.sync="queryParams.currentPage"
      page-size.sync="queryParams.pageSize"
      :page-sizes="[10, 20, 50, 100]"
      style="text-align: center">
    </el-pagination>

    <!-- 商品详情 -->
    <el-dialog :visible.sync="detailOpen" @close="handleClose()" title="商品详情界面">

      <!--详情数据展示-->
      <el-table stripe border height="670" width="1000px" :data="productDetailList">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品名称">
                <span>{{ props.row.productName }}</span>
              </el-form-item>
              <el-form-item label="所属店铺">
                <span>{{ props.row.belongingStore }}</span>
              </el-form-item>
              <el-form-item label="商品颜色">
                <span>{{ props.row.productColor }}</span>
              </el-form-item>
              <el-form-item label="商品长度">
                <span>{{ props.row.productLength }}</span>
              </el-form-item>
              <el-form-item label="商品高度">
                <span>{{ props.row.productHeight }}</span>
              </el-form-item>
              <el-form-item label="商品宽度">
                <span>{{ props.row.productWidth }}</span>
              </el-form-item>
              <el-form-item label="商品类型">
                <span>{{ props.row.productType }}</span>
              </el-form-item>
              <el-form-item label="商品当前价格">
                <span>{{ props.row.productPrice }}</span>
              </el-form-item>
              <el-form-item label="商品当前折扣">
                <span>{{ props.row.discount }}</span>
              </el-form-item>
              <el-form-item label="商品库存">
                <span>{{ props.row.productQuantity }}</span>
              </el-form-item>
              <br/>
              <el-form-item label="商品图片展示">
                <div class="carousel-container">
                  <img src="public/static/首页图标测试.jpg">
                </div>
              </el-form-item>

            </el-form>
          </template>
        </el-table-column>

        <el-table-column  prop="productColor" label="商品颜色" width="150"/>

        <el-table-column  prop="productLength" label="商品长度" width="150"/>

        <el-table-column  prop="productPrice" label="商品当前价格" width="150"/>

        <el-table-column  prop="discount" label="折扣力度" width="150"/>

        <el-table-column  prop="productQuantity" label="商品库存" width="150"/>
      </el-table>

    </el-dialog>

  </div>
</template>
<script>
//引入封装request请求
import { getProductList,getProductDetailList } from "@/api/mall/prouduct"
//引入图片展示组件
import ImageCarousel from "@/views/mall/prouduct/ picture_carousel/ImageCarousel"


export default {
  data(){
    return{
      //查询参数 商品
      queryParams: {
        //查询页码
        currentPage: 1,
        //查询行数
        pageSize: 10,
        //总行数
        total:0,
        //商品中文名
        productName: '',
        //商品英文名
        productEnName:'',
      },
      //查询参数 商品详情
      queryProductDetailParams:{
        //页码
        currentPage: 1,
        //查询行数
        pageSize: 10,
        //总行数
        total:0,
        //商品颜色
        productColor:'',
        //商品配置
        productType:'',
        //商品ID
        productId:0,
      },
      //数据接收集合   商品
      productList:[],
      //数据接收集合 商品详情
      productDetailList:[],
      //查询状态显示 true
      showSearch:true,
      //详情弹窗绑定变量
      detailOpen:false,
    }
  },methods:{
    //查询方法
    handleQuery(event){
      //判断queryParams的查询数据的值是否不为null
      if (this.queryParams.productEnName!=null && this.queryParams.productEnName != '' || this.queryParams.productName != null  && this.queryParams.productName != '' ){
        //赋值分页参数未默认数据
        this.queryParams.currentPage = 1;
        this.queryParams.pageSize = 10;
      }
      //调用查询后端方法
      getProductList(this.queryParams).then((res)=>{
        //赋值展示数据
        this.productList = res.list;
        //赋值展示数据总行数
        this.queryParams.total = res.total;
        //弹出提示加载完成
        this.open1();
      }).catch((error)=>{
        //弹出错误提示
        this.open4();
      })
    },
    //重置方法
    resetQuery(){
      this.queryParams.productName = null;
    },
    //灰色弹窗提示
    open1() {
      this.$message({
        showClose: true,
        message: '加载完成'
      });
    },
    //成功提示
    open2() {
      this.$message({
        showClose: true,
        message: '操作成功',
        type: 'success'
      });
    },
    //警告提示
    open3() {
      this.$message({
        showClose: true,
        message: '危险操作',
        type: 'warning'
      });
    },
    //错误提示
    open4() {
      this.$message({
        showClose: true,
        message: '操作失败,请联系管理员',
        type: 'error'
      });
    },
    //查看详情方法
    ViewDetail(ele){
      //将弹窗绑定变量设置为true
      this.detailOpen = true
      //给查询参数第一次的ID赋值
      this.queryProductDetailParams.productId = ele.productId;
      //调用查询接口
      this.handleDetailQuery();
    },
    //关闭详情弹窗
    handleClose(){
      this.detailOpen = false;
    },
    //商品详情获取接口
    handleDetailQuery(){
      getProductDetailList(this.queryProductDetailParams).then((res)=>{
        //赋值 展示数据
        this.productDetailList = res.list;
        //赋值 展示数据长度
        this.queryProductDetailParams.total = res.total;
        //弹出加载完成提示
        this.open1();
      }).catch((error)=>{
        this.open4();
      });
    },
  },
  //初始化函数钩子
  mounted() {
    //调用查询方法
    this.handleQuery();
  },
  watch:{
    'queryParams.currentPage'(newVal, oldVal) {
      console.log('当前页已改变:', newVal);
      this.queryParams.currentPage = newVal;
    }
  },
  //组件
  components: {
    ImageCarousel
  }

}

</script>

<style >
  .max_div{
    margin-top: 30px; /* 设置上边距为50像素 */
    margin-left: 30px; /* 设置上边距为50像素 */
    width: 100%;
  }
</style>
